<template>
  <div class="main">
    <div class="header">
      <van-nav-bar
        title="新增收货地址"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="body">
      <h3>收货地址</h3>
      <div class="add-form">
        <van-form >
          <van-field
            v-model="userName"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="phoneNumber"
            name="电话"
            label="电话"
            placeholder="电话"
            :rules="[{ required: true, message: '请填写电话' }]"
          /><van-field
            name="地区"
            label="地区"
            placeholder="地区"
            :rules="[{ required: true, message: '请填写地区' }]"
            @click="isPop=true"
            v-model="newAddressStr"
          /><van-field
            v-model="detail"
            name="详细地址"
            label="详细地址"
            placeholder="街道门牌、楼层等"
            :rules="[{ required: true, message: '街道门牌、楼层等'}]"
          />
          <div style="margin: 40px;">
            <van-button round block type="info"
                        native-type="submit"
                        color="linear-gradient(90deg,red,#fd5f36)"
                        @click="submitAddress"
            >
              提交
            </van-button>
          </div>
        </van-form>
        <van-popup position="bottom" v-model="isPop">
          <van-area title="标题" :area-list="areaList" @confirm="handleConfirm" @cancel="isPop = false" class="area"/>
        </van-popup>
      </div>
    </div>
  </div>

</template>

<script>
import { areaList } from '@vant/area-data'
import { addAddress } from '@/api/address'
export default {
  name: 'AddAddress',
  data () {
    return {
      areaList,
      isPop: false,
      newAddressStr: '',
      newAddressId: 0,
      newAddressList: [],
      userName: '',
      phoneNumber: '',
      detail: ''
    }
  },
  methods: {
    handleConfirm (val) {
      this.isPop = false
      this.newAddressStr = val.map((item) => item.name).join(',')
      this.newAddressId = val.at(-1).code
      console.log(this.newAddressId)
      val.forEach(item => {
        const { name: label, code: value } = item
        this.newAddressList.push({ label, value })
      })
    },
    async submitAddress () {
      const form = {
        name: this.userName,
        phone: this.phoneNumber,
        region: this.newAddressList,
        detail: this.detail
      }
      const res = await addAddress(form)
      // console.log(res)
      if (res.status === 200) {
        this.$toast.success('添加成功')
        this.isPop = false
        this.newAddressStr = ''
        this.userName = ''
        this.phoneNumber = ''
        this.detail = ''
        setTimeout(() => {
          this.$router.back()
        }, 1000)
      }
    }
  }
}

</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.main {
  background-color: rgba(239, 239, 239, 0.35);
}
.body {
  height: 100vh;
  padding: 0 19px;
  h3 {
    color: #999999;
    margin-top: 20px;
    font-size: 25px;
  }
  .add-form {
    margin-top: 20px;
    border-radius: 15px;
    .van-cell.van-field {
      font-size: 20px;
      height: 80px;
      align-items: center;
    }
    .van-cell.van-field:first-child {
      border-radius: 15px 15px 0 0;
    }
  }
}

</style>
